<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./Swiper/swiper-bundle.css" />
    <!-- <link rel="stylesheet" href="./swiper-bundle.min.css"> -->
    <link rel="stylesheet" href="./6.24index.css" />
    <script src="./Swiper/swiper-bundle.js"></script>
    <!-- <script src="./swiper-bundle.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="back">
                <div class="Image">
                    <img src="./img/微信截图_20220624160331.png" alt="" />
                </div>
                <div class="nav">
                    <div class="nav-item">关于我们</div>
                    <div class="nav-item">我们的产品</div>
                    <div class="nav-item">新闻动态</div>
                    <div class="nav-item">企业社会责任</div>
                    <div class="nav-item">加入我们</div>
                </div>
            </div>
            <div
                class="swiper mySwiper swiper-fade swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
                <div class="swiper-wrapper" id="swiper-wrapper-abd41055fc1c950c9" aria-live="polite">
                    <div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 4"
                        style="
                width: 1601px;
                opacity: 1;
                transform: translate3d(0px, 0px, 0px);
              ">
                        <img
                            src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png" />
                    </div>
                    <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 4" style="
                width: 1601px;
                opacity: 0;
                transform: translate3d(-1601px, 0px, 0px);
              ">
                        <img
                            src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/1-b4afd269ffb0ba19bd1dd33e3ed5cec3.png" />
                    </div>
                    <div class="swiper-slide" role="group" aria-label="3 / 4" style="
                width: 1601px;
                opacity: 0;
                transform: translate3d(-3202px, 0px, 0px);
              ">
                        <img
                            src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/2-468bb0555d827d48bce4e178f085bf90.png" />
                    </div>
                    <div class="swiper-slide" role="group" aria-label="4 / 4" style="
                width: 1601px;
                opacity: 0;
                transform: translate3d(-4803px, 0px, 0px);
              ">
                        <img
                            src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png" />
                    </div>
                </div>
                <div
                    class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                        aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                        tabindex="0" role="button" aria-label="Go to slide 2"></span><span
                        class="swiper-pagination-bullet" tabindex="0" role="button"
                        aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0"
                        role="button" aria-label="Go to slide 4"></span>
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
            <div id="mission">
                <p class="mission">使命</p>
                <p class="desc">激发创造 丰富生活</p>
            </div>
        </div>
        <div class="box2">
            <div class="writing">
                <p class="title">企业文化</p>
                <div class="paragraph">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。</div>
            </div>


            <!-- <div id="code-of-conduct" class="box3">
            <p>行为准则</p>
            <div class="right">
                <p class="desc-inner">字节跳动相信，在企业发展过程中，高道德标准和诚信文化发挥着关键作用。因此，我们制定了字节跳动行为准则和字节跳动合作伙伴行为准则。</p>
                <a href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uj_shpjpmmv_ljuhklafi/ljhwZthlaukjlkulzlp/code_of_conduct.pdf" target="_blank" rel="noopener noreferrer" class="jsx-2799334019">
                    <span class="jsx-2799334019">了解更多</span>
                    <span class="jsx-2799334019 suffix">→</span>
                </a>
            </div>
            <img srcset="width:300px; height:200px" src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/cod-812b8e96a232cda309a0786e4f2356e3.jpeg" alt="" class="jsx-2799334019">
        </div> -->

        </div>
</body>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        effect: "fade",
        autoplay: true,
        
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });




    // $('.nav-item').hover({
    //     'background-color': '#ffd83c'
    // })
    var a = document.getElementById("nav")
    navitem.onmouseover = function () {
        btn1.style.background-color 
    }
    navitem.onclick = function () {
        btn1.style.display = "none"
    }
</script>

</html>